<template>
<div>
  <div class="header">
     <v-header :seller="seller"></v-header>
  </div>
  <!--1像素(通过伪类与缩放实现),引用mixin.scss -->
  <div class="tab border-1px">
    <router-link class="tab-item" to="/goods">商品</router-link>
    <router-link class="tab-item" to="/ratings">评价</router-link>
    <router-link class="tab-item" to="/seller">商家</router-link>
  </div>
   <!--渲染组件 keep-alive在动态组件切换时会缓存 原理：将组件状态缓存到内存中-->
  <keep-alive>
    <router-view :seller="seller"></router-view>
  </keep-alive>
</div>
</template>
<script>
import header from './components/header/header.vue'; // header是原生标记,即不可作为组件名称
import $http from './utils/http.js';
import api from './api/app.js';
import {urlParse} from './utils/utils.js';

export default {
  components: {
    'v-header': header
  },
  data() {
    return {
      seller: {
        id:(() => {
           let param = urlParse();
           console.log('立即执行函数param的值 ',param);
           return param.id 
        })() //立即执行函数，收藏商家使用
      }
    };
  },
  created() {
    this.sellerInfo(); // 做一些初始化，实现函数自执行
  },
  methods: {
    sellerInfo: async function() {
      let param = {
        id:this.seller.id
      }
      const res =  await $http.post(api.seller,param);
      this.seller = res.data;
      //Object.assign()扩展对象的属性方法
      console.log('before : Object.assign扩展对象的属性方法 ' + this.seller.id);
      this.seller = Object.assign({},param,res.data);
      console.log('after :  Object.assign扩展对象的属性方法 ' + this.seller.id);
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "./assets/style/mixin.scss";
  .tab {
      display: flex;
      width: 100%;
      height: 40px;
      line-height: 40px;
      // border-bottom: 1px solid rgba(7,17,27, 0.1);
      @include border-1px(rgba(7, 17, 27, 0.1));
      .tab-item {
        flex: 1;
        text-align: center;
        display: block;
        font-size: 14px;
        color: rgb(77, 85, 93);
      }
      .active { //此样式在路由配置中使用
        color: rgb(240, 20, 20)
      }
  }
</style>
